<template>
  <div class="add-friend-comp">
    <!-- 搜索框 -->
    <div class="search pb-10">
      <n-input type="text" placeholder="搜索" v-model:value="keyword">
        <template #prefix>
          <n-icon size="20">
            <SearchOutline></SearchOutline>
          </n-icon>
        </template>
      </n-input>
    </div>

    <!-- 搜索结果 -->
    <ScrollView style="height: 300px">
      <div class="result">
        <ul v-if="showUserList.length">
          <li
            class="friend radius flex flex-cc mt-10"
            v-for="(v, i) in showUserList"
            :key="i"
            :class="v.disabled ? 'disabled' : 'hover click'"
            @click="
              () => {
                if (!v.disabled) {
                  v.isSelected = !v.isSelected
                }
              }
            "
          >
            <div class="mr-10">
              <BaseImage class="kang-avatar" :src="v.avatar"></BaseImage>
            </div>

            <div class="fz-16 flex-1">{{ v.name }}</div>

            <div class="flex flex-center">
              <n-icon size="24" v-if="v.isSelected">
                <RadioButtonOnOutline
                  style="color: var(--color-primary)"
                ></RadioButtonOnOutline>
              </n-icon>

              <n-icon size="24" v-else>
                <RadioButtonOffOutline
                  style="color: var(--color-basic)"
                ></RadioButtonOffOutline>
              </n-icon>
            </div>
          </li>
        </ul>

        <n-empty class="mt-30" description="暂无数据" v-else></n-empty>
      </div>
    </ScrollView>

    <div class="flex flex-center mt-10">
      <n-button
        class="submit-btn"
        type="primary"
        :disabled="selectedUserList.length === 0"
        :loading="props.config?.loading"
        @click="onSubmit"
      >
        {{ props.config?.submitBtnText || '确认提交' }}
      </n-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  SearchOutline,
  RadioButtonOffOutline,
  RadioButtonOnOutline,
} from '@vicons/ionicons5'
import api from '@/kang/js/api'
import mitt from '@/kang/js/mitt'

const props = defineProps({
  config: {
    type: Object,
    default: {},
  },
})

const keyword = ref('')

const userList = computed(() => {
  return props.config?.list || []
})

const showUserList = computed(() => {
  if (keyword.value.trim()) {
    return userList.value.filter((v) => {
      let name = v.displayName || v.userName
      let count = 0

      name.split('').map((w) => {
        if (keyword.value.includes(w)) {
          count += 1
        }
      })

      return count > 0
    })
  } else {
    return userList.value
  }
})

const selectedUserList = computed(() => {
  return userList.value.filter((v) => v.isSelected && !v.disabled)
})

// 提交
function onSubmit() {
  props.config?.onSubmit({ selectedUserList: selectedUserList.value })
}
</script>

<style lang="scss" scoped>
.add-friend-comp {
  height: 400px;

  .search {
    border-bottom: 5px solid var(--color-bg);

    :deep(.n-input) {
      background-color: var(--color-bg);
      border-radius: 10px;

      .n-input__border {
        display: none;
      }
    }
  }

  .result {
    .friend {
      padding: 10px;

      &.disabled {
        background-color: var(--color-bg);
        cursor: not-allowed !important;
      }
    }
  }
}
</style>
